<template>
	<view class="dispatch">
		
		<view class="list mt30">
			<block v-for="(item,index) in orderList" :key="index">
				<view class="item bg-white" @click.stop="goDetails(item.id)">
					<view class="bor-bot p30">
						<view class="acea-row row-between-wrapper top">
							<view>预约派单</view>
							<view class="acea-row row-middle">
								<view>{{ item._status }}</view>
								<view class="iconfont icon-xiangyou ml10"></view>
							</view>
						</view>
						<view class="p20">
							<view class="acea-row row-between-wrapper">
								<view class="color333 bold fs-28">共{{ item.count }}件</view>
								<view class="color333 fs-24">包裹预估重量：{{ item.yugu_weight || 0 }}m³</view>
							</view>
							<view class="color999 fs-24 mt20">预估金额：￥{{ item.yugu_price || 0 }}</view>
							<view class="color999 fs-24 mt20">订单偏号：{{ item.order_id }}</view>
							<view class="color999 fs-24 mt20">上门时间：{{ item.yy_time }}</view>
							<view class="color999 fs-24 mt20">上门地址：{{ item.user_address }}</view>
						</view>
					</view>
					<view class="acea-row row-right row-middle p30">
						<view class="btn">查看详情</view>
					</view>
				</view>
			</block>
			<view class='loadingicon acea-row row-center-wrapper' v-if="orderList.length > 0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
		</view>
		
		<view class="acea-row row-middle row-column row-center row-column" v-if="orderList.length == 0">
			<image class="order-none" src="https://airecoveryproject.oss-cn-hangzhou.aliyuncs.com/serve-app/order-none.png" mode="aspectFit"></image>
			<text class="fs-26 color666">暂无订单呢~</text>
		</view>
		
	</view>
</template>

<script>
	import{
		orderlist
	} from '@/api/news.js'
	export default {
		data() {
			return {
				status:'',
				page:1,
				limit:10,
				loading: false,
				loadend: false,
				loadTitle: this.$t(`加载更多`), //提示语
				orderList:[],
				
			};
		},
		onLoad(option) {
			this.status = option.status || '';
			this.getlist();
		},
		methods:{
			getlist(){
				let that = this;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = "";
				orderlist({
					status: that.status,
					page: that.page,
					limit: that.limit,
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.orderList.concat(list);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				});
			},
			goDetails(id){
				uni.navigateTo({
					url: `/pages/dispatch/details?id=${id}`
				})
			}
		},
		onReachBottom() {
			this.getlist();
		}
	}
</script>

<style lang="scss" scoped>
	.dispatch{
		
		.msg{
			color: #F75700;
			font-size: 22rpx;
		}
		
		.list{
			
			.item{
				margin-bottom: 30rpx;
				
				.top{
					background-color: #0AD08C;
					border-radius: 10px;
					height: 96rpx;
					padding: 0 30rpx;
					color: #ffffff;
					font-size: 28rpx;
				}
				
				.btn{
					width: 244rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background-color: #0AD08C;
					color: #ffffff;
					font-size: 26rpx;
					text-align: center;
					line-height: 64rpx;
				}
				
			}
		}
		
		.order-none{
			width: 520rpx;
			height: 446rpx;
			margin: 100rpx auto;
		}
		
		
		
	}
</style>
